<template>
  <view class="con">
    <!-- banner -->
    <swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
      <swiper-item v-for="(item,index) in bannerList" :key="index" @click="goPage(item)">
        <image mode="aspectFill" class="banner_img" :src="item.pic"></image>
      </swiper-item>
    </swiper>
    <!-- 分类 -->
    <view class="felei">
      <view class="felei_li" v-for="(item,index) in navList" @click="goClassification(item.id)">
        <image mode="widthFix" class="felei_li_img" :src="item.pic"></image>
        <view class="felei_li_c">{{item.title}}</view>
      </view>
    </view>
    <!-- 热门 -->
    <view class="remen" style="margin-bottom: 50rpx;">
      <view class="remen_t">热门</view>
      <!-- 列表 -->
      <view class="remenList flex">
        <view class="remenList_li" @click="goProductDetail(item)" v-for="(item,index) in hotList" :key="index">
          <view class="remenList_lic flex">
            <view class="remenList_lic1">{{item.title || ''}} </view>
            <image class="remenList_lic12" mode="widthFix" src="/static/index/img39.jpg" v-if="item.title"></image>
          </view>
          <view class="remenList_linav">{{item.des || ''}}</view>
        </view>
      </view>
    </view>
    <!-- 推荐 -->
    <view class="remen">
      <view class="remen_t">推荐</view>
      <!-- 列表 -->
      <view class="tuijian">
        <view class="tuijianli flex flex_between" @click="goProductDetail(item)" v-for="(item,index) in tuiList">
          <!-- 左边 -->
          <view class="tuijianliz">
            <view class="remenList_lic flex">
              <view class="remenList_lic1">{{item.title || ''}}</view>
              <image class="remenList_lic12" mode="widthFix" src="/static/index/img39.jpg" v-if="item.huo!=='0'"></image>
            </view>
            <view class="remenList_linav">{{item.des || ''}}</view>
          </view>
          <!-- 右边 -->
          <image class="tuijian_right" mode="widthFix" :src="item.pic"></image>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import {
  	// getOpenid, //获取openid
  	getLoginUser, //获取用户信息
  	getIndexInfo, //获取首页
  } from '@/request/api.js'
  export default {
    data() {
      return {
        indicatorDots: true,
        autoplay: true,
        interval: 2000,
        duration: 500,
        bannerList:[], //banner
        navList: [{
            img: '/static/index/img34.png',
            title: '网创实战'
          },
          {
            img: '/static/index/img35.png',
            title: '海外实战'
          },
          {
            img: '/static/index/img36.png',
            title: '常用工具'
          },
          {
            img: '/static/index/img37.png',
            title: '训练营'
          }
        ],
        hotList: [{
            title: '涨粉计划',
            con: '50%起佣金，保姆级陪跑'
          },
          {
            title: '闲鱼宝藏',
            con: '50%起佣金，保姆级陪跑'
          },
          {
            title: '搭子部落',
            con: '50%起佣金，保姆级陪跑'
          },
          {
            title: '京东带货',
            con: '50%起佣金，保姆级陪跑'
          }
        ],
        tuiList:[]
      }
    },
    onLoad(options) {
    	this.getIndexInfoFun(); //获取首页信息
    	console.log('进入首页--获取options')
    	const q = decodeURIComponent(options.q) // 获取到二维码原始链接内容
    	console.log(options)
    	console.log(options.pid)
    	console.log(q)
    	if (options.pid) {
    		// 通过分享页面进的
    		console.log('通过分享页面进的')
    		uni.setStorageSync('pid', options.pid)
    
    	} else if (q) {
    		// 通过扫描二维码进的
    		console.log('通过扫描二维码进的')
    		var match = q.match(/\?(.+)/);
    		if (match && match.length > 1) {
    			var queryString = match[1].split("=")[1]; // 获取到的查询字符串
    			console.log('pid是多少'); // 输出: data=12345
    			console.log(queryString); // 输出: data=12345
    			uni.setStorageSync('pid', queryString)
    		} else {
    			console.log('No query string found.');
    		}
    	}
    },
    onShow() {
    	this.isLogin = uni.getStorageSync('isLogin') || 1
    	this.isShow = false
    	if (this.openid) {
    		console.log('走了吗')
    		this.getLoginUserFun() //获取用户信息--通过接口
    	}
      if (this.isLogin === 1) {
      	console.log('未授权登录')
        uni.hideShareMenu()
      }else{
        uni.showShareMenu({
        	withShareTicket: true,
        	menus: ["shareAppMessage", "shareTimeline"]
        })
      }
    	// this.getOpenidFun();//获取openid
    },
    methods:{
      // 获取用户信息--通过接口
      getLoginUserFun() {
      	let that = this
        if(!this.openid){
          that.userInfo = uni.getStorageSync('userInfo');
          console.log('userInfo这是多少')
          console.log(that.userInfo)
          return
        }
      	getLoginUser({
      		openid: this.openid,
      		pid: uni.getStorageSync('pid') || ''
      	}).then(res => {
      		console.log('首页--获取用户信息')
      		console.log(res)
      		if (res.error_code === 0) { 
      			uni.setStorageSync('userInfo', res.data);
      			that.userInfo = that.userInfo
      			that.$forceUpdate()
      		} else {
      			uni.showToast({
      				icon: 'none',
      				title: res.msg
      			})
      		}
      	})
      },
      //获取首页信息
      getIndexInfoFun() {
      	getIndexInfo().then(res => {
      		console.log('获取首页信息')
          this.bannerList = res.data.banner
          this.navList = res.data.nav
      		this.hotList = res.data.hot
      		this.tuiList = res.data.tui
      	})
      },
      // 进入-产品详情页
      goProductDetail(item) {
      	console.log(item)
      	if (item.id === 0 || item.id === '0' || item.id === null) {
      		return
      	}
      	uni.navigateTo({
      		url: '/pages/shiZhanDe/index?id=' + item.id + '&title=' + item.title
      	})
      },
      goClassification(id){
        if (id === 0 || id === '0' || id === null) {
        	return
        }
        uni.reLaunch({
        	url: '/pages/classification/index?tabId=' + id 
        })
      },
      // banner跳转
      goPage(item){
        if((item.type===1||item.type==='1')&&item.urls){
          console.log('跳转--实战')
          uni.navigateTo({
          	url: '/pages/shiZhanDe/index?id=' + item.urls +'&title=' + item.title
          })
        }else if((item.type===2||item.type==='2')&&item.urls){
          console.log('跳转--公告')
          uni.navigateTo({
            url:"/packageA/index/detail2?id="+item.urls+'&title='+item.title
          })
        }
      }
    },
    // 分享
    // 分享微信好友
    onShareAppMessage(event) {
    	console.log(event);
        return {
        	title: '陌上未来，没有焦虑的未来',
        	path: '/pages/index/index?pid=' + uni.getStorageSync('userInfo').id,
        	// imageUrl: imageUrl
        }
    },
    //分享到朋友圈
    onShareTimeline(event) {
    	console.log(event);
    	return {
    		title: '陌上未来，没有焦虑的未来',
    		path: '/pages/index/index?pid=' + uni.getStorageSync('userInfo').id,
    		query: 'pid=' + uni.getStorageSync('userInfo').id,
    		// imageUrl: imageUrl
    	}
    }
  }
</script>

<style scoped lang="scss">
  .con {
    width: 100%;
    padding:30rpx;
    height: auto;
    box-sizing: border-box;
  }

  .swiper {
    height: 300rpx;
    width: 100%;
    border-radius: 20rpx;
    overflow: hidden;
  }

  .swiper-item {
    display: block;
    height: 300rpx;
    line-height: 300rpx;
    text-align: center;
    border-radius: 20rpx;
    overflow: hidden;
  }

  .swiper-list {
    margin-top: 40rpx;
    margin-bottom: 0;
  }

  .banner_img {
    width: 100%;
    height: 300rpx;
    border-radius: 20rpx;
  }

  .felei {
    width: 100%;
    height: auto;
    display: flex;
    margin: 80rpx 0;
    padding: 0 30rpx;
    justify-content: space-between;
    box-sizing: border-box;
    .felei_li {
   
      height: auto;
      text-align: center;
      .felei_li_img {
        width: 48rpx;
        height: auto;
        margin: 0 auto;
        margin-bottom: 12rpx;
      }
      .felei_li_c {
        width: 100%;
        // text-align: center;
        color: rgba(16, 16, 16, 1);
        font-size: 28rpx;
        font-family: Lato-regular;
      }
    }
  }

  .remen {
    width: 100%;
    height: auto;

    .remen_t {
      color: rgba(16, 16, 16, 1);
      font-size: 36rpx;
      font-family: Lato-regular;
      margin-left: 30rpx;
      margin-bottom: 40rpx;
    }
  }

  .remenList {
    width: 100%;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    .remenList_li {
      width: 334rpx;
      border-radius: 20rpx;
      height: 160rpx;
      overflow: hidden;
      background: #fff;
      display: flex;
      flex-direction: column;
      justify-content: center;
      margin-bottom: 30rpx;

      .remenList_lic {
        padding-left: 30rpx;
        width: 330rpx;
        box-sizing: border-box;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        margin-bottom: 8rpx;

        .remenList_lic1 {
          max-width: 237rpx;
          overflow: hidden;
          margin-right: 10rpx;
          font-size: 32rpx;
          font-weight: bold;
          height: 40rpx;
        }

        .remenList_lic12 {
          width: 50rpx;
          height: auto;
          flex-shrink: 0;
          border-radius: 40rpx;
          position: relative;
          top: -10rpx;
        }
      }

      .remenList_linav {
        padding-left: 30rpx;
        width: 330rpx;
        box-sizing: border-box;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        color: rgba(137, 137, 137, 1);
        font-size: 24rpx;
      }
    }
  }
  .tuijian{
    width: 100%;
    height: auto;
    .tuijianli{
      width: 100%;
      height: auto;
      padding: 30rpx;
      box-sizing: border-box;
      border-radius: 20rpx;
      margin-bottom: 30rpx;
      background: #fff;
      .tuijianliz{
        width: 80%;
        .remenList_lic{
          width: 100%;
          height: auto;
          margin-bottom: 8rpx;
          .remenList_lic1{
            width: auto;
            max-width: 300rpx;
            overflow: hidden;
            margin-right: 10rpx;
            font-size: 32rpx;
            font-weight: bold;
          }
          .remenList_lic12{
            width: 50rpx;
            height: auto;
            flex-shrink: 0;
            border-radius: 40rpx;
            position: relative;
            top: -10rpx;
          }
          
        }
        .remenList_linav {
          width: 100%;
          box-sizing: border-box;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          color: rgba(137, 137, 137, 1);
          font-size: 24rpx;
        }
      }
      .tuijian_right{
        width: 80rpx;
        height: auto;
        border-radius: 10rpx;
      }
    }
  }
</style>